<template>
  <view class="broadband-fault-page">
    <image class="page-bg" src="/static/images/bg.png" mode="aspectFill" />
    <view class="gradient-bg" :style="{ top: navBarHeight + 'px' }"></view>
    <CustomNavbar title="手机紧急开机" />
    
    <view class="page-content" :style="{ paddingTop: navBarHeight + 'px' }">
      <!-- 本机号码 -->
      <!-- <view class="phone-info">
        <text class="phone-label">本机号码:</text>
      </view> -->
      
      <!-- 故障指示器 -->
      <view class="fault-indicator">
        <view class="fault-box">
          <view class="wifi-icon-wrapper">
            <image class="wifi-icon" src="/static/icons/icon-sos.png" mode="aspectFit" />
          </view>
        </view>
      </view>
      
      <view class="sos-phone">
         <text class="phone-title">
          紧急开机号码
        </text>
        <text class="phone-label">
          {{ phoneNumber }}
        </text>
        <button class="btn-primary" @click="handleQuery">我要开机</button>
      </view>
     
      
      <!-- 温馨提示 -->
      <view class="tips-section">
        <view class="tips-header">
          <view class="tips-line"></view>
          <text class="tips-title">温馨提示</text>
        </view>
        <view class="tips-content">
          <text class="tip-item">亲，欢迎您使用手机临时授信服务</text>
          <text class="tip-item">1、5-7星客户可享受此权益.您的手机号码处于停机状态且暂时不方便缴费时，可申请手机紧急授信开机48小时，每月只可享受一次该权益。</text>
          <text class="tip-item">2、5星级客服可享受临时信用额度为50元;6星级客服可享受临时信用额度为80元:7星级客服可享受临时信用额度为100元。</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import CustomNavbar from '@/components/CustomNavbar.vue'
import { api } from '@/utils/api.js';

const navBarHeight = ref(88)
const phoneNumber = ref('189*****0691')

onMounted(() => {
  const windowInfo = uni.getWindowInfo()
  const statusBarHeight = windowInfo.statusBarHeight || 0
  navBarHeight.value = statusBarHeight + 44
})

const getStartLevel = async () => {
  api.getStartLevel({}).then(res => {
    console.log('紧急开机查询:', JSON.stringify(res))
    if(res.code === 200) {
      if(res.data.code===0){
        uni.showToast({
          title: res.data.msg || '申请成功',
          icon: 'success'
        })
      }else{
        uni.showToast({
          title: res.data.msg || '申请失败',
          icon: 'none'
        })
      }
      
      // phoneNumber.value = res.data.startLevelPhone
    }else{
      uni.showToast({
        title: res.msg || '申请失败',
        icon: 'none'
      })
    }
  }).catch(err => {
    console.error('紧急开机查询失败:', err)
  })
}

const handleQuery =  () => {
   getStartLevel()
}

</script>

<style scoped>
.broadband-fault-page {
   
  position: relative;
  z-index: 1;
}

.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  object-fit: cover;
}

.gradient-bg {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  /* backdrop-filter: blur(40rpx); */
background: rgba(255, 255, 255, 0.4);
}

.page-content {
  position: relative;
  z-index: 2;
  padding: 40rpx 32rpx;
  padding-bottom: 40rpx;
}

/* 本机号码 */
.phone-info {
  margin-top: 40rpx;
  margin-bottom: 60rpx;
}
.sos-phone{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24rpx;
}
.phone-title{
  color: rgba(102, 102, 102, 1);
font-family: HarmonyOS Sans SC;
font-size: 32rpx;
font-weight: 500;
line-height: 38rpx;
}

.phone-label {
  color: rgba(78, 138, 254, 1);
font-family: HarmonyOS Sans SC;
font-size: 48rpx;
font-weight: 500;
line-height: 56rpx;
}

/* 故障指示器 */
.fault-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 80rpx;
  margin-top: 40rpx;
}

.fault-box {
  width: 280rpx;
  height: 280rpx;
  /* border: 2rpx dashed rgba(255, 255, 255, 0.6); */
  border-radius: 16rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.wifi-icon-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wifi-icon {
  width: 280rpx;
  height: 280rpx;
  /* opacity: 0.6; */
}

.x-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 59, 48, 1);
  font-size: 100rpx;
  font-weight: bold;
  line-height: 1;
  pointer-events: none;
  z-index: 10;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
    gap: 24rpx;
    /* margin-bottom: 60rpx; */
    padding: 0 60rpx;
}

.btn-primary {
  /* flex: 1; */
  /* height: 64rpx; */
  border-radius: 80rpx;
  font-family: HarmonyOS Sans SC;
  font-size: 28rpx;
  font-weight: 500;
  line-height: 32rpx;
  /* text-align: center; */
  border: none;
  padding: 16rpx 64rpx;
}

.btn-primary {
  color: rgba(255, 255, 255, 1);
  border-radius: 80rpx;
/* backdrop-filter: blur(8px); */
background: rgba(78, 138, 254, 1);
}

/* 温馨提示 */
.tips-section {
  /* background: rgba(255, 255, 255, 0.9); */
  border-radius: 16rpx;
  padding: 32rpx;
  backdrop-filter: blur(10rpx);
  -webkit-backdrop-filter: blur(10rpx);
}

.tips-header {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.tips-line {
  width: 8rpx;
  height: 40rpx;
  background: rgba(78, 138, 254, 1);
  border-radius: 4rpx;
  margin-right: 16rpx;
}

.tips-title {
  color: rgba(51, 51, 51, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 32rpx;
  font-weight: 700;
  line-height: 38rpx;
}

.tips-content {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.tip-item {
  color: rgba(153, 153, 153, 1);
font-family: HarmonyOS Sans SC;
font-size: 24rpx;
font-weight: 400;
line-height: 28rpx;
}
</style>
